<template>
  <div class="背景">
    <TchHead :welcome="welcome" :title="title" />
    <div class="内容">
      <div class="新增内容标题">作业标题：</div>
      <div class="新增输入栏">
        <input class="输入框 新增输入框" v-model="form.title" />
      </div>
      <div class="新增内容标题">作业描述：</div>
      <div class="新增输入栏">
        <textarea
          class="输入框 新增输入框"
          rows="6"
          v-model="form.content"
        ></textarea>
        <div class="center">
          <input
            type="file"
            accept="image/png, image/jpeg, image/gif, image/jpg"
            @change="upImage($event)"
            v-if="imgList.length < 3"
          />
          <div class="图片预览">
            <div
              style="position: relative"
              v-for="(item, index) in imgList"
              :key="index"
            >
              <img :src="item" width="100" height="100" />
              <div class="图片删除按钮" @click="imgList.splice(index, 1)">
                ×
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="新增内容标题">起止时间：</div>
      <div class="新增输入栏" style="border-bottom: 1px solid">
        <div class="新增时间选项" style="margin-bottom: 10px">
          <div class="新增内容标题">开始时间：</div>
          <input
            class="时间输入框"
            placeholder="请选择时间"
            type="datetime-local"
            v-model="form.startime"
          />
        </div>
        <div class="新增时间选项">
          <div class="新增内容标题">结束时间：</div>
          <input
            class="时间输入框"
            placeholder="请选择时间"
            type="datetime-local"
            v-model="form.endtime"
          />
        </div>
      </div>
      <div class="center">
        <button class="发布按钮" @click="issue">发布</button>
      </div>
    </div>
  </div>
</template>
<script>
import TchHead from "@/components/TchHead";
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      welcome: "某老师，您好！",
      title: "",
      form: {
        title: "",
        content: "",
        startime: "2000-01-01T00:00",
        endtime: "2000-01-01T00:00",
        tch_id: "",
        cou_id: "",
      },
      imgList: [],
    };
  },
  mounted() {
    // 修改顶部
    this.welcome = localStorage.getItem("zyh_welcome");
    this.title = localStorage.getItem("zyh_cou_name");

    // 载入数据
    this.form.tch_id = localStorage.getItem("zyh_tch_id");
    this.form.cou_id = localStorage.getItem("zyh_cou_id");
  },
  components: {
    TchHead,
  },
  methods: {
    // 上传图片
    upImage(e) {
      if (!e.target.files) return;
      if (!e.target.files[0].size) return;
      if (e.target.files[0].type.indexOf("image") === -1) {
        ElMessage({
          type: "error",
          message: "请选择图片文件",
        });
      } else {
        const that = this;
        const reader = new FileReader(); // 创建读取文件对象
        reader.readAsDataURL(e.target.files[0]); // 发起异步请求，读取文件
        reader.onload = function () {
          that.imgList.push(this.result);
        };
      }
    },
    // 作业发布
    issue() {
      if (this.form.title === "") {
        ElMessage({
          type: "error",
          message: "作业标题不能为空",
        });
      } else if (this.form.content === "") {
        ElMessage({
          type: "error",
          message: "作业内容不能为空",
        });
      } else if (this.form.startime >= this.form.endtime) {
        ElMessage({
          type: "error",
          message: "开始时间必须小于结束时间",
        });
      } else {
        this.form.work_img1 = this.imgList[0];
        this.form.work_img2 = this.imgList[1];
        this.form.work_img3 = this.imgList[2];
        request.post("/mentor/addWork.php", this.form).then((res) => {
          if (res.code === "200") {
            ElMessage({
              type: "success",
              message: "发布成功",
            });
            this.$router.push("/TchWork");
          } else {
            ElMessage({
              type: "error",
              message: res.msg,
            });
          }
        });
      }
    },
  },
};
</script>

<style>
.center {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.新增内容标题 {
  background-color: white;
  padding: 5px;
  border: 1px solid;
  border-radius: 7px;
}
.新增输入栏 {
  width: 100%;
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid;
}
.新增输入框 {
  width: calc(100% - 10px);
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 3px;
  resize: none;
}
.图片预览 {
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.图片删除按钮 {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  background-color: #ddddddaa;
  border-radius: 50%;
}
.新增时间选项 {
  display: flex;
}
.时间输入框 {
  border: 0;
  padding: 0 20px;
  margin: 0 auto;
  text-align: center;
}
.发布按钮 {
  width: 170px;
  height: 50px;
  margin-top: 30px;
  border: none;
  background-color: #509296;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 11px;
  font-size: 22px;
  color: #fff;
}
</style>